<!--  -->
<template>
  <div class="address">
    <el-select v-model="provinec_id" filterable placeholder="请选择省份">
      <el-option
        v-for="item in provinceData"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      v-model="city_id"
      filterable
      placeholder="请选择市"
      style="margin-left: 10px"
    >
      <el-option
        v-for="item in cityData"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <!-- <el-input v-model="ruleForm1.otherAddress" /> -->
    </el-select>
    <el-select
      v-model="area_id"
      filterable
      placeholder="请选择地区"
      style="margin-left: 10px"
    >
      <el-option
        v-for="item in areaData_ary"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-input
      v-model="address"
      class="inputAddress"
      placeholder="请输入详细地址"
    />
  </div>
</template>

<script>
import provinceData from '@/assets/js/level_linkage/province'
import cityData from '@/assets/js/level_linkage/city'
import areaData_ary from '@/assets/js/level_linkage/area'
export default {
    props: ['addressObj'],
    data() {
    // 这里存放数据
        return {
            provinceData,
            cityData: [],
            areaData_ary: [],
            address: '',
            provinec_id: null,
            city_id: null,
            area_id: null
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {
        addressObj: {
            handler(item) {
                if (item.provinec_id) {
                    this.address = item.address
                    this.provinec_id = item.provinec_id + ''
                    this.city_id = item.city_id + ''
                    this.area_id = item.area_id + ''
                    this.cityInitData(this.provinec_id)
                    this.areaInitData(this.city_id)
                }
            },
            deep: true,
            immediate: true
        },
        provinec_id(item) {
            if (this.addressObj.provinec_id != item) {
                this.city_id = null
                this.area_id = null
            }
            this.cityInitData(item)
        },
        city_id(item) {
            if (this.addressObj.provinec_id != this.provinec_id) {
                this.area_id = null
            }
            this.areaInitData(item)
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 方法集合
    methods: {
    // 根据省拿到市
        cityInitData(item) {
            if (item) {
                var city_ary = []
                for (var i in cityData) {
                    for (var k in cityData[i]) {
                        if (cityData[i][k].value.substring(0, 2).indexOf(item) > -1) {
                            city_ary.push(cityData[i][k])
                        }
                    }
                }
                this.cityData = city_ary
            }
        },
        // 根据市拿到区
        areaInitData(item) {
            if (item) {
                var area_ary = []
                for (var i in areaData_ary) {
                    for (var k in areaData_ary[i]) {
                        var arr = areaData_ary[i][k]
                        for (var j in areaData_ary[i][k]) {
                            if (arr[j].value.substring(0, 4).indexOf(item) > -1) {
                                area_ary.push(arr[j])
                            }
                        }
                    }
                }
                this.areaData_ary = area_ary
            }
        }
    }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.address {
  display: flex;

  .inputAddress {
    width: 300px;
    margin-left: 20px;
  }
}
</style>
